<template>
  <div v-if="show">
    <el-menu
        default-active="/"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        router
    >
      <!--      @select="handleSelect"-->
      <div style="display: flex;align-content: center;align-items: center">
        <span style="font-size: 25px;font-weight: bolder;color: black;margin-left: 10px">CanASM</span>
      </div>
      <div class="flex-grow" />
      
      <!-- 普通菜单项 -->
      <template v-for="(item, index) in menu" :key="index">
        <!-- Analysis菜单 -->
        <el-sub-menu 
          v-if="item.icon === 'analysis'" 
          :index="String(index)"
        >
          <template #title>
            <el-icon><Search /></el-icon>
            <span style="font-size: 18px;">Analysis</span>
          </template>
          <el-menu-item 
            v-for="child in item.children" 
            :key="child.path" 
            :index="child.path"
          >
            {{ child.name }}
          </el-menu-item>
        </el-sub-menu>

        <!-- 其他菜单项 -->
        <el-menu-item 
          v-else 
          :index="item.path"
          style="font-size: 18px;"
        >
          <el-icon v-if="item.icon==='home'"><HomeFilled /></el-icon>
          <el-icon v-if="item.icon==='browse'"><View /></el-icon>
          <el-icon v-if="item.icon==='statistics'"><Histogram /></el-icon>
          <el-icon v-if="item.icon==='download'"><Download /></el-icon>
          <el-icon v-if="item.icon==='genome_browser'"><svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1471"><path d="M938.666667 213.333333h-128V85.333333h-85.333334v128h-85.333333a170.666667 170.666667 0 0 0-170.666667 170.666667v85.333333h-85.333333a170.666667 170.666667 0 0 0-170.666667 170.666667v85.333333H85.333333v85.333334h128v128h85.333334v-128h85.333333a170.666667 170.666667 0 0 0 170.666667-170.666667v-85.333333h85.333333a170.666667 170.666667 0 0 0 170.666667-170.666667v-85.333333h128zM469.333333 640a85.333333 85.333333 0 0 1-85.333333 85.333333h-85.333333v-85.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h85.333333z m256-256a85.333333 85.333333 0 0 1-85.333333 85.333333h-85.333333v-85.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h85.333333z" p-id="1472"></path></svg></el-icon>
          <el-icon v-if="item.icon==='help'"><QuestionFilled /></el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>

    </el-menu>
  </div>
  <div v-if="!show">
    <el-menu
        default-active="/"
        class="el-menu-demo"
        background-color="#2185d0"
        text-color="#ffffff"
        active-text-color="orange"
        mode="horizontal"
        :ellipsis="false"
        router
    >
      <!--      @select="handleSelect"-->
      <div style="display: flex;align-content: center;align-items: center">
        <span style="font-size: 25px;font-weight: bolder;color: white;margin-left: 10px">CanASM</span>
      </div>
      <div class="flex-grow" />
      
      <!-- 普通菜单项 -->
      <template v-for="(item, index) in menu" :key="index">
        <!-- Analysis菜单 -->
        <el-sub-menu 
          v-if="item.icon === 'analysis'" 
          :index="String(index)"
        >
          <template #title>
            <el-icon><Search /></el-icon>
            <span style="font-size: 18px;">Analysis</span>
          </template>
          <el-menu-item 
            v-for="child in item.children" 
            :key="child.path" 
            :index="child.path"
          >
            {{ child.name }}
          </el-menu-item>
        </el-sub-menu>

        <!-- 其他菜单项 -->
        <el-menu-item 
          v-else 
          :index="item.path"
          style="font-size: 18px;"
        >
          <el-icon v-if="item.icon==='home'"><HomeFilled /></el-icon>
          <el-icon v-if="item.icon==='browse'"><View /></el-icon>
          <el-icon v-if="item.icon==='statistics'"><Histogram /></el-icon>
          <el-icon v-if="item.icon==='download'"><Download /></el-icon>
          <el-icon v-if="item.icon==='genome_browser'"><svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1471"><path d="M938.666667 213.333333h-128V85.333333h-85.333334v128h-85.333333a170.666667 170.666667 0 0 0-170.666667 170.666667v85.333333h-85.333333a170.666667 170.666667 0 0 0-170.666667 170.666667v85.333333H85.333333v85.333334h128v128h85.333334v-128h85.333333a170.666667 170.666667 0 0 0 170.666667-170.666667v-85.333333h85.333333a170.666667 170.666667 0 0 0 170.666667-170.666667v-85.333333h128zM469.333333 640a85.333333 85.333333 0 0 1-85.333333 85.333333h-85.333333v-85.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h85.333333z m256-256a85.333333 85.333333 0 0 1-85.333333 85.333333h-85.333333v-85.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h85.333333z" p-id="1472"></path></svg></el-icon>
          <el-icon v-if="item.icon==='help'"><QuestionFilled /></el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>

    </el-menu>
  </div>
</template>


<script>
import {reactive, toRefs} from "@vue/reactivity"
import { useRouter } from 'vue-router'
import {watch,ref} from "vue";

export default {
  name: "NavBar",
  setup(){
    const router = useRouter()
    const data = reactive({
      menu: [
        {path:'/home',name: 'Home',icon:'home'},
        {path:'/browse',name:'Browse',icon:'browse'},
        {path: 1, icon:'analysis',children:[
            {path:'/TF_binding_analysis',name:'TF binding'},
            {path:'/analysis_chromatin_interaction',name:'Target gene prediction by 3D'},
            {path:'/Prediction_of_cell_marker_variations',name:'Cell marker variation prediction'},
          ]},
        {path:'/statistics',name:'Statistics',icon:'statistics'},
        {path:'/download',name:'Download',icon:'download'},
        // {path:'/genome_browser',name: 'Genome browser',icon:'genome_browser'},
        {path:'/help',name:'Help',icon:'help'}
      ],
      show: ref(null)
    })

    watch(()=>router.currentRoute.value.fullPath,(value)=>{
      console.log('router=>',value)
      if (value==="/home"){
        data.show = true
      }else if (value === '/'){
        data.show = true
      }else {
        data.show = false
      }
    })


    if (router.currentRoute.value.fullPath==="/home"){
      data.show = true
    }else if (router.currentRoute.value.fullPath === '/'){
      data.show = true
    }else {
      data.show = false
    }

    return {
      ...toRefs(data)
    }
  }
}
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}

</style>
